<!DOCTYPE html>
<html>
    <!-- <body>
        <img style="width: 97%;height: 120px;margin-left: 5px;border-radius: 10px 10px 10px 10px;"/>
    </body>
    <script>
        var imgArr = ['pic_01.jpg','pic_06.png'];
        var i = 0;
        function showImg(){
            $("img").attr("src","resources/images/"+imgArr[i]);
            i=(i+1)%imgArr.length;
            setTimeout('showImg()',1000);
        }
        showImg();
    </script> -->

<head>
    <meta charset="UTF-8">

    <!-- 此处设置对移动端页面开发很重要，该设置确保页面与设备相适应 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/css" rel="stylesheet" href="resources/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="resources/css/font-awesome.min.css">
    <link rel="stylesheet" href="demo.css">



    <style type="text/css">
        /* 首页背景贴图 */
        html {
            height: 100%;
            /* 高度填充整个窗口 */
        }

        body {
            /* height: 100%; */
            /* 高度填充整个html */
            padding: 0;
            /* 内边距为0 */
            margin: 0;
            /* 外边距为0 */
            background-color: #F5F5F5;
            /* 整个页面背景为淡灰色 */

            background-size: 100% 100%;
        }

        .my-mine {
            /* position: absolute; */
            width: 364px;
            height: 404px;
            display: flex;
            /*定义本元素为flex容器*/
            /* 指定flex容器主轴排列方向（与其垂直的方向即为交叉轴）， flex容器内部元素的排列方向*/
            flex-direction: row;
            justify-content: flex-start;
            /*指定主轴的对齐方式*/
            align-items: center;
            /*指定交叉轴的对齐方式*/
        }

        .im {
            position:absolute;
            width: 120px;
            height: 120px;
            /* background-color: #cccccc; */
            left: 122px;
            /* align-content: center; */
            top: 100PX;
            border-radius: 58px 58px 58px 58px;
        }

        .it1 {
            width: 150px;
            height: 53px;
            margin-top: 350px;
            margin-left: 16px;
            margin-right: 16px;
            /* background-color: #cccccc; */
            /* margin-left: 50px; */
            /* background-image: linear-gradient(to right, #12B7F5, #9e0cf3 100%); */
            /*滤镜*/
            /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1); */
            background-image: linear-gradient(to right, #ff5000 0, #ff0000 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
            border-radius: 25px 25px 25px 25px;
        }

        .it1:active {
            background-image: linear-gradient(to right, #ff7f44 0, #ff6262 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
        }
        .type{
            margin-top: 5px;
            margin-right: 140px;
            width: 100px;
            height: 30px;
            text-align: center;
            font-size: 20px;
            /* line-height: 14px; */
            color: #fff;
            border: none;
            font-weight: bold;
            /* 加粗 */
            /* background-color: whitesmoke; */
        }
        .it2 {
            width: 150px;
            height: 53px;
            margin-top: 350px;
            margin-left: 16px;
            margin-right: 16px;
            /* background-color: #cccccc; */
            /* margin-left: 50px; */
            background-image: linear-gradient(to right, #12B7F5, #9e0cf3 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
            /* background-image: linear-gradient(to right, #ff5000 0, #ff0000 100%); */
            /*滤镜*/
            /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1); */
            border-radius: 25px 25px 25px 25px;
        }

        .it2:active {
            background-image: linear-gradient(to right, rgb(112, 217, 255), #be4eff 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
        }

        .my-header-item {
            /* position: absolute; */
            color: white;
            font-weight: bold;
            margin-left: 52px;
            font-size: 22px;
            margin-top: 10px;
            /* text-align: center; */
            /* align-content: center; */
        }
    </style>

</head>

<body>

        <div class="my-mine" @click="toMine">
            <div class="im">
                <img src="resources/images/pic_07.jpg"
                    style="width:100%;height:100%;border-radius: 58px 58px 58px 58px;">
            </div> 
            <!-- <input v-model="user.u_id" type="text" class="form-control" placeholder="请输入账号"> -->

            <div onclick="jump1()" class="it1">
                <div class="my-header-item" type="weigth=100%;height=100%">登录</div>
            </div>


            <div onclick="jump2()" class="it2">
                <div class="my-header-item" type="weigth=100%;height=100%">注册</div>
            </div>
        </div>




        <div class="type"></div>
        <i onclick="jump()" style="position:absolute;left:10px;top:5px;" class="fa fa-angle-left fa-2x"></i>
    </div>

</body>




<!-- 在body结尾之后引入以下js文件。 注意导入顺序不可以随意改变。 -->
<script src="resources/js/jquery-3.3.1.slim.min.js"></script>
<script src="resources/js/popper.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/vue.min.js"></script>
<script src="resources/layer_mobile/layer.js"></script>
<script src="resources/js/axios.min.js"></script>
<script src="resources/js/my-mobile.js"></script>


<script>
        /*
            vue是一个数据驱动式javascript框架：数据改变，界面即改变，需要改变界面，仅需改变数据。
        */
   
        
        function jump(){

            setTimeout("window.location.href='home.html'",2);

          }  

                  
        function jump1(){

               setTimeout("window.location.href='login.html'",2);

}  

        
         function jump2(){

                    setTimeout("window.location.href='register.html'",2);

}  
        </script>



</html>